/**
* 功能描述：基础时间选择器样式表
* @author jin xiaohang
* @date 2022/9/20 13:57
*/


@import "src/style/mixins/index";

//时间选择器样式
@include b(base-time-picker){

  //基础高度
  $--timepicker-base-height:50%;

  //基础宽度
  $--timepicker-base-width:280px;

  //鼠标悬停背景色
  $--timepicker-inrange-hover-background-color:white ;
  //样式相关
  //background-color: $--color-primary;
  //border-style: $--border-style-base;
  //border-radius: $--border-radius-zero;

  //字体大小
  font-size: $font-size-extra-large;

  //布局相关
  height: $--timepicker-base-height;
  width: $--timepicker-base-width;
  position: relative;
  padding: 5px;
  margin: 10px;

  //输入框样式
  @include b(base-time-input){
    width: 100%;
    padding: 2px;
    min-width: $--timepicker-base-min-width;
    min-height: $--timepicker-base-min-height;

    //禁用样式
    &:disabled{
      cursor: not-allowed;
      background-color: #909399;
    }
  }

  //待选面板样式
  @include b(base-time-picker-panel){
    display: flex;
    max-height: $--timepicker-base-max-height;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 300px;
    height: 80px;
    position: absolute;
    top: 45px;
    bottom: 0;
    z-index: 1050;
    box-shadow: 0 2px 8px #00000026;

    //待选面板项样式
    @include b(base-time-picker-select){
      position: relative;
      background-color:#FFFFFF;
      overflow: hidden;
      max-height: $--timepicker-base-max-height;
      height: 80px;
      width: 100px;
      font-size: $font-size-small;
      color: black;

      //鼠标悬停
      &:hover{
        overflow-y: scroll;
      }
      ul{
        li{
          &:hover{
            cursor: pointer;
            background-color: #DCDFE6;
          }
        }
      }
    }
  }



}